.node {
    position: absolute;
    background: #2d3748;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    user-select: none;
    display: flex;
    flex-direction: column;
    border: 1px solid;
    color: white;
    font-size: 12px;
}

.node-header {
    padding: 8px 12px;
    background: #4a5568;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-weight: bold;
    cursor: move;
    border-bottom: 1px solid
}

.node-body {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    min-height: 120px;
    border-top: 1px solid
}

.node-inputs,
.node-outputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.node-port {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin: 4px 0;
}

.node-input {
    padding-left: 8px;
}

.node-output {
    padding-right: 8px;
    justify-content: flex-end;
}

.port-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4a5568;
}

.port-label {
    color: #4a5568;
}

.exec .port-dot {
    background-color: #48bb78;
}

.data .port-dot {
    background-color: #4299e1;
}

.node.selected {
    box-shadow: 0 0 0 3px #4299e1;
    border-color: #4299e1;
}

.node.dragging {
    opacity: 0.8;
    cursor: move;
}

.node-flow {
    border-color: #48bb78;
}

.node-procedure {
    border-color: #4299e1;
}

.node-product {
    border-color: #9f7aea;
}